
// // 1. 初始化渲染
// const renderList = async () => {
//     const res = await axios.get("/students");
//     const html = res.data
//       .map((item, i) => {
//         return `
//           <tr>
//             <td>${item.name}</td>
//             <td>${item.age}</td>
//             <td>${item.gender === 0 ? "男" : "女"}</td>
//             <td>第${item.group}组</td>
//             <td>${item.hope_salary}</td>
//             <td>${item.salary}</td>
//             <td>${item.province} ${item.city} ${item.area}</td>
//             <td>
//               <a href="javascript:;" class="text-success mr-3"><i data-id=${
//                 item.id
//               } class="bi bi-pen"></i></a>
//               <a href="javascript:;" class="text-danger"><i data-id=${
//                 item.id
//               } class="bi bi-trash"></i></a>
//             </td>
//           </tr>
//         `;
//       })
//       .join("");
//     document.querySelector(".list").innerHTML = html;
//     document.querySelector(".total").innerHTML = res.data.length;
//   };
//   renderList();
  
//   // 初始化模态框 & 城市选择
//   // bootstrap的模态框直接cv即可
//   const modalBox = document.querySelector("#modal");
//   const modal = new bootstrap.Modal(modalBox);
//   const ps = document.querySelector("[name=province]");
//   const cs = document.querySelector("[name=city]");
//   const as = document.querySelector("[name=area]");
//   const initCity = async () => {
//     // 显示省市区
//     const { data: province } = await axios.get("/api/province");
//     const phtml = province
//       .map((item) => `<option value="${item}">${item}</option>`)
//       .join("");
//     ps.innerHTML = `<option value="">--省份--</option>${phtml}`;
//     // 省市区联动
//     ps.addEventListener("change", async () => {
//       cs.value = "";
//       as.value = "";
//       const { data: city } = await axios.get("/api/city", {
//         params: { pname: ps.value },
//       });
//       const chtml = city
//         .map((item) => `<option value="${item}">${item}</option>`)
//         .join("");
//       cs.innerHTML = `<option value="">--市--</option>${chtml}`;
//     });
//     cs.addEventListener("change", async () => {
//       as.value = "";
//       const { data: area } = await axios.get("/api/area", {
//         params: { pname: ps.value, cname: cs.value },
//       });
//       const ahtml = area
//         .map((item) => `<option value="${item}">${item}</option>`)
//         .join("");
//       as.innerHTML = `<option value="">--区--</option>${ahtml}`;
//     });
//   };
//   initCity();
  
//   // 2. 添加学生
//   document.querySelector("#openModal").addEventListener("click", () => {
//     modalBox.querySelector("form").reset();
//     modalBox.querySelector(".modal-title").innerHTML = "添加学员";
//     modalBox.dataset.id = "add";
//     modal.show();
//   });
//   const form = modalBox.querySelector("form");
//   document.querySelector("#submit").addEventListener("click", async () => {
//     const data = serialize(form, { hash: true });
//     data.age = +data.age;
//     data.hope_salary = +data.hope_salary;
//     data.salary = +data.salary;
//     data.gender = +data.gender;
//     data.group = +data.group;
//     if (modalBox.dataset.id !== "add") {
//       try {
//         await axios.put(`/students/${modalBox.dataset.id}`, data);
//         modal.hide();
//         renderList();
//       } catch (error) {
//         alert("修改失败");
//       }
//     } else {
//       try {
//         await axios.post("/students", data);
//         modal.hide();
//         renderList();
//       } catch (error) {
//         alert("添加失败");
//       }
//     }
//   });
  
//   // 3. 删除学生
//   document.querySelector(".list").addEventListener("click", async (e) => {
//     const btn = e.target;
//     if (btn.classList.contains("bi-trash")) {
//       // 删除
//       try {
//         await axios.delete(`/students/${btn.dataset.id}`);
//         renderList();
//       } catch (error) {
//         alert("删除失败");
//       }
//     }
//     if (btn.classList.contains("bi-pen")) {
//       // 编辑
//       const { data: student } = await axios.get(`/students/${btn.dataset.id}`);
//       const fields = modalBox.querySelectorAll("form [name]");
//       Array.from(fields).forEach(async (item) => {
//         if (item.name === "gender") {
//           if (+item.value === student[item.name]) item.checked = true;
//         } else {
//           item.value = student[item.name];
//         }
//       });
//       const { data: city } = await axios.get("/api/city", {
//         params: { pname: ps.value },
//       });
//       const chtml = city
//         .map((item) => `<option value="${item}">${item}</option>`)
//         .join("");
//       cs.innerHTML = `<option value="">--市--</option>${chtml}`;
//       cs.value = student.city;
//       const { data: area } = await axios.get("/api/area", {
//         params: { pname: ps.value, cname: cs.value },
//       });
//       const ahtml = area
//         .map((item) => `<option value="${item}">${item}</option>`)
//         .join("");
//       as.innerHTML = `<option value="">--区--</option>${ahtml}`;
//       as.value = student.area;
  
//       modalBox.querySelector(".modal-title").innerHTML = "修改学员";
//       // 记录ID修改使用
//       modalBox.dataset.id = student.id;
//       modal.show();
//     }
//   });